<template>
  <el-dialog
    v-model="dialogVisible"
    :title="titleDialog"
    width="1180px"
    append-to-body
  >
    <div style="margin-top: -20px">
      <div class="order-info">
        <el-descriptions
          style="margin-top: 16px"
          id="order_info_table"
          class="mt"
          :column="3"
          :size="size"
          border
        >
          <el-descriptions-item
            label-align="center"
            label-class-name="label-style"
          >
            <template #label>
              <div class="cell-item">订单支付号</div>
            </template>
            {{ form.tradeNo }}
          </el-descriptions-item>
          <el-descriptions-item
            label-align="center"
            label-class-name="label-style"
          >
            <template #label>
              <div class="cell-item">商户订单号</div>
            </template>
            {{ form.orderNo }}
          </el-descriptions-item>
          <el-descriptions-item
            label-align="center"
            label-class-name="label-style"
          >
            <template #label>
              <div class="cell-item">订单时间</div>
            </template>
            {{ form.createTime }}
          </el-descriptions-item>
          <el-descriptions-item
            label-align="center"
            label-class-name="label-style"
          >
            <template #label>
              <div class="cell-item">订单状态</div>
            </template>
            {{ form.orderStatusName }}
          </el-descriptions-item>
          <el-descriptions-item
            label-align="center"
            label-class-name="label-style"
          >
            <template #label>
              <div class="cell-item">订单总价</div>
            </template>
            {{ form.totalPrice || 0 }}元
          </el-descriptions-item>
          <el-descriptions-item
            label-align="center"
            label-class-name="label-style"
          >
            <template #label>
              <div class="cell-item">实付金额</div>
            </template>
            {{ form.payPrice || 0 }}元
          </el-descriptions-item>

          <el-descriptions-item
            label-align="center"
            label-class-name="label-style"
          >
            <template #label>
              <div class="cell-item">支付方式</div>
            </template>
            {{ form.payType == 1 ? "支付宝" : "微信" }}
          </el-descriptions-item>
          <el-descriptions-item
            label-align="center"
            label-class-name="label-style"
          >
            <template #label>
              <div class="cell-item">支付时间</div>
            </template>
            {{ form.payTime }}
          </el-descriptions-item>
          <el-descriptions-item
            label-align="center"
            label-class-name="label-style"
          >
            <template #label>
              <div class="cell-item">支付状态</div>
            </template>
            {{ form.payStatus === 0 ? "未支付" : "支付成功" }}
          </el-descriptions-item>
          <el-descriptions-item
            label-align="center"
            label-class-name="label-style"
          >
            <template #label>
              <div class="cell-item">游泳馆名称</div>
            </template>
            {{ form.swimPlaceName }}
          </el-descriptions-item>
          <el-descriptions-item
            label-align="center"
            label-class-name="label-style"
          >
            <template #label>
              <div class="cell-item">游泳馆地址</div>
            </template>
            {{ form.swimPlaceAddress }}
          </el-descriptions-item>
          <el-descriptions-item
            label-align="center"
            label-class-name="label-style"
          >
            <template #label>
              <div class="cell-item">课程名称</div>
            </template>
            {{ form.courseName }}
          </el-descriptions-item>
          <el-descriptions-item
            label-align="center"
            label-class-name="label-style"
          >
            <template #label>
              <div class="cell-item">游泳课班级</div>
            </template>
            {{ form.swimPlaceClassName }}
          </el-descriptions-item>
          <el-descriptions-item
            label-align="center"
            label-class-name="label-style"
          >
            <template #label>
              <div class="cell-item">报名时间</div>
            </template>
            {{ form.signupStartTime }} ~ {{ form.signupEndTime }}
          </el-descriptions-item>
          <el-descriptions-item
            label-align="center"
            label-class-name="label-style"
          >
            <template #label>
              <div class="cell-item">上课日期</div>
            </template>
            {{ form.courseStartDate }} ~ {{ form.courseEndDate }}
          </el-descriptions-item>
          <el-descriptions-item
            label-align="center"
            label-class-name="label-style"
          >
            <template #label>
              <div class="cell-item">上课时间</div>
            </template>
            {{ form.courseStartTime }} ~ {{ form.courseEndTime }}
          </el-descriptions-item>
          <el-descriptions-item
            label-align="center"
            label-class-name="label-style"
          >
            <template #label>
              <div class="cell-item">报名限制人数</div>
            </template>
            {{ form.limitNum }}人
          </el-descriptions-item>
          <el-descriptions-item
            label-align="center"
            label-class-name="label-style"
          >
            <template #label>
              <div class="cell-item">上课地址</div>
            </template>
            {{ form.courseAddress }}
          </el-descriptions-item>
          <el-descriptions-item
            label-align="center"
            label-class-name="label-style"
          >
            <template #label>
              <div class="cell-item">学校名称</div>
            </template>
            {{ form.schoolName }}
          </el-descriptions-item>
          <el-descriptions-item
            label-align="center"
            label-class-name="label-style"
          >
            <template #label>
              <div class="cell-item">年级名称</div>
            </template>
            {{ form.gradeName }}
          </el-descriptions-item>
          <el-descriptions-item
            label-align="center"
            label-class-name="label-style"
          >
            <template #label>
              <div class="cell-item">班级名称</div>
            </template>
            {{ form.className }}
          </el-descriptions-item>
          <el-descriptions-item
            label-align="center"
            label-class-name="label-style"
          >
            <template #label>
              <div class="cell-item">家长姓名</div>
            </template>
            {{ form.parentName }}
          </el-descriptions-item>
          <el-descriptions-item
            label-align="center"
            label-class-name="label-style"
          >
            <template #label>
              <div class="cell-item">家长手机号</div>
            </template>
            {{ form.parentPhone }}
          </el-descriptions-item>
          <el-descriptions-item
            label-align="center"
            label-class-name="label-style"
          >
            <template #label>
              <div class="cell-item">学生姓名</div>
            </template>
            {{ form.studentName }}
          </el-descriptions-item>
          <el-descriptions-item 
            :span="2"
            label-align="center"
            label-class-name="label-style"
          >
            <template #label>
              <div class="cell-item">确认收货备注</div>
            </template>
            {{ form.confirmReceiptRemark }}
          </el-descriptions-item>
        </el-descriptions>
      </div>
    </div>
  </el-dialog>
</template>

<script setup name="OrderForm">
import { getOrder } from "@/api/order/order";

const { proxy } = getCurrentInstance();

const data = reactive({
  form: {},
});

const { form } = toRefs(data);

//订单取消按钮控制
const dialogVisible = ref(false);
const titleDialog = ref("订单详情");
const openDialog = async (orderId) => {
  reset();
  dialogVisible.value = true;
  if (orderId && orderId > 0) {
    const res = await getOrder(orderId);
    const data = res.data || {};
    form.value = data;
  }
};

defineExpose({ openDialog });

// 表单重置
function reset() {
  form.value = {
    id: null,
  };
  proxy.resetForm("orderFormRef");
}

// 取消按钮
function cancel() {
  dialogVisible.value = false;
  reset();
}
</script>

<style scoped lang="scss">
.order-info {
  padding: 16px;
  border-radius: 4px;
  background: #ffffff;
  display: flex;
  flex-direction: column;
  .order-info-title {
    color: #303133;
    font-family: PingFang SC;
    font-weight: 500;
    font-size: 18px;
  }
}
</style>
